<template>
  <div class="ProductIist">
    <van-search
      v-model="key"
      shape="round"
      background="#fff"
      @search="onSearch"
      placeholder="请输入搜索关键词"
    />
    <van-list
      v-model="dataList[active].loading"
      :finished="dataList[active].finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <van-tabs v-model="active" @change="changeActive" sticky color="#D2AE62">
        <van-tab title="未审核">
          <ul v-if="dataList[active].list.length > 0">
            <li
              class="ProductIist_item"
              v-for="(item, index) in dataList[active].list"
              :key="index"
            >
              <van-row @click="getProducts(item.sku)">
                <van-col span="6">
                  <img :src="$base.baseImg + item.img[0]" />
                </van-col>
                <van-col span="18">
                  <div class="ProductIist_item_name">
                    <h3>
                      {{ item.proName }}
                    </h3>
                    <p>价格：￥{{ $common.formatMoney(item.price) }}</p>
                    <p>
                      <span>{{ $common.getExactTime(item.createTime) }}</span>
                    </p>
                  </div>
                </van-col>
              </van-row>
            </li>
          </ul>
          <van-empty v-else />
        </van-tab>
        <van-tab title="通过审核">
          <ul v-if="dataList[active].list.length > 0">
            <li
              class="ProductIist_item"
              v-for="(item, index) in dataList[active].list"
              :key="index"
            >
              <van-row @click="getProducts(item.sku)">
                <van-col span="6">
                  <img :src="$base.baseImg + item.img[0]" />
                </van-col>
                <van-col span="18">
                  <div class="ProductIist_item_name">
                    <h3>
                      {{ item.proName }}
                    </h3>
                    <p>价格：￥{{ $common.formatMoney(item.price) }}</p>
                    <p>
                      <span>{{ $common.getExactTime(item.createTime) }}</span>
                    </p>
                  </div>
                </van-col>
              </van-row>
            </li>
          </ul>
          <van-empty v-else />
        </van-tab>
        <van-tab title="未通过审核">
          <ul v-if="dataList[active].list.length > 0">
            <li
              class="ProductIist_item"
              v-for="(item, index) in dataList[active].list"
              :key="index"
            >
              <van-row @click="getProducts(item.sku)">
                <van-col span="6">
                  <img :src="$base.baseImg + item.img[0]" />
                </van-col>
                <van-col span="18">
                  <div class="ProductIist_item_name">
                    <h3>
                      {{ item.proName }}
                    </h3>
                    <p>价格：￥{{ $common.formatMoney(item.price) }}</p>
                    <p>
                      <span>驳回理由：{{ item.excuse }}</span>
                      <!-- <span>{{ $common.getExactTime(item.createTime) }}</span> -->
                    </p>
                  </div>
                </van-col>
              </van-row>
            </li>
          </ul>
          <van-empty v-else />
        </van-tab>
      </van-tabs>
    </van-list>
    <div class="new" @click="getProducts(0)">
      <img src="@/assets/add.png" alt="" />
    </div>
  </div>
</template>

<script lang="ts">
import { Vue, Component, Prop } from "vue-property-decorator";
import { Tab, Tabs, List, Col, Row, Empty, Search, Toast } from "vant";
Vue.use(List);
Vue.use(Tab);
Vue.use(Tabs);
Vue.use(Col);
Vue.use(Row);
Vue.use(Search);
Vue.use(Empty);
window.onload = function () {
  var isPageHide = false;
  window.addEventListener("pageshow", function () {
    if (isPageHide) {
      window.location.reload();
    }
  });
  window.addEventListener("pagehide", function () {
    isPageHide = true;
  });
};
@Component({})
export default class ProductIist extends Vue {
  private active: number = 0;
  private key: string = "";
  private dataList = [
    {
      form: {
        page: 1,
        size: 20,
        key: "",
        online: 1,
        status: 0,
      },
      loading: false,
      finished: false,
      list: [],
    },
    {
      form: {
        page: 1,
        size: 20,
        key: "",
        online: 1,
        status: 1,
      },
      loading: false,
      finished: false,
      list: [],
    },
    {
      form: {
        page: 1,
        size: 20,
        key: "",
        online: 1,
        status: 2,
      },
      loading: false,
      finished: false,
      list: [],
    },
  ];

  private onLoad(): void {
    this.$common.getAuthToken(this.proList);
  }
  // 切换商品状态
  changeActive(e: number) {
    this.active = Number(e);
  }
  // 搜索
  private onSearch() {
    this.dataList[this.active].form.page = 1;
    this.dataList[this.active].finished = false;
    this.dataList[this.active].list = [];
    this.proList();
  }
  // 获取商品列表
  private proList() {
    this.$post(`proList`, {
      ...this.dataList[this.active].form,
      mid: parseInt(this.$route.params.id),
      key: this.key,
    }).then((res: any) => {
      if (res.code == 0) {
        this.dataList[this.active].loading = false;
        this.dataList[this.active].list = this.dataList[
          this.active
        ].list.concat(res.data.list);
        this.dataList[this.active].form.page += 1;
        if (res.data.list < 20) {
          this.dataList[this.active].finished = true;
        }
      }
    });
  }
  // 跳转商品详情
  private getProducts(e: number): void {
    this.$router.push(`/onLineNewProduct/${e}`);
  }
}
</script>

<style lang="scss" scoped>
.ProductIist {
  ul {
    list-style: none;
    width: 100%;
    padding: 30px;
    box-sizing: border-box;
    .ProductIist_item {
      width: 100%;
      padding: 20px;
      box-sizing: border-box;
      background-color: #fff;
      margin-bottom: 20px;
      border-radius: 10px;
      img {
        width: 100%;
        height: 110px;
        display: block;
        border-radius: 10px;
      }
      .ProductIist_item_name {
        width: 100%;
        padding-left: 20px;
        box-sizing: border-box;
        & > h3 {
          font-size: 30px;
          font-weight: 400;
          color: #000000;
          line-height: 1.2;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
        }
        & > p {
          font-size: 24px;
          font-weight: 300;
          color: #e9c790;
          line-height: 1.5;
          overflow: hidden;
          span {
            // float: right;
            color: #343434;
          }
        }
      }
    }
  }
  .new {
    position: fixed;
    width: 100px;
    height: 100px;
    right: 50px;
    bottom: 50px;
    z-index: 999;
    border-radius: 100%;
    img {
      width: 100%;
      display: block;
    }
  }
}
</style>
